<template>
	<view class="wrap">
		<uni-forms ref="form" :rules="rules" :modelValue="form" validate-trigger="blur" label-width="180rpx" err-show-type="toast">
			<view class="top">
				<uni-forms-item label="收款方式" required>
					<picker class="picker" @change="pickerChange($event,accTypeList)" :value="index"
						:range="accTypeList" :range-key="'name'">
						<view class="picker">
							{{accTypeName}}
						</view>
					</picker>
				</uni-forms-item>
			</view>

			<view class="top" style="margin-top: 20rpx;">
				<uni-forms-item required label="收款姓名" name="accountName">
					<uni-easyinput v-model="form.accountName" type="text" maxlength="64" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入收款姓名" />
				</uni-forms-item>
				<uni-forms-item required label="收款账号" name="accountKey">
					<uni-easyinput v-model="form.accountKey" type="text" maxlength="64" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请填写收款账号" />
				</uni-forms-item>

				<!-- <uni-forms-item label="支付地址" required>
				<uni-data-checkbox v-model="form.paymentLink" multiple :localdata="hobbys" />
			</uni-forms-item> -->

				<uni-forms-item label="收款码" required name="imageFile">
					<up-upload :fileList="imageFileList" @afterRead="afterRead" accept="image"
						:capture="['album', 'camera']" @delete="deletePic" :maxCount="1" :width="120"
						:maxSize="5 * 1024 * 1024" :previewFullImage="true"></up-upload>
				</uni-forms-item>
			</view>
			<view class="bottom">
				<uni-forms-item label="支付方式" required>
					<uni-data-checkbox v-model="form.paymentWay" :localdata="paymentWayList" />
				</uni-forms-item>
				<view class="default">
					<view class="left">
						<view class="set">
							默认收款账号
						</view>
						<view class="tips">提醒：每次收款会默认推荐该账号</view>
					</view>
					<view class="right">
						<u-switch activeColor="#5ac725" size="24" v-model="isDefault" @change="setDefault"></u-switch>
					</view>
				</view>
			</view>
		</uni-forms>

		<view class="submitBtn">
			<up-button @click="submitForm('form')" :loading="loading" text="提交" shape="circle" :hairline="true"
				color="linear-gradient(to right, rgb(60, 156, 255), rgb(41, 121, 255))"></up-button>
		</view>
	</view>
	
	<geek-code ref="code" v-model:code="code" @success="onConfirm"></geek-code>
</template>

<script>
	import _ from 'lodash'
	import {
		info,add,uploadFile,edit
	} from "@/api/seller/cashier"
	export default {
		data() {
			return {
				id:'',
				code:'',
				imageFileList: [],
				form: {
					accountType: "",
					accountKey: "",
					accountName: "",
					paymentWay: "qr",
					paymentLink: "",
					paymentImage:"",
					status: "1"
				},
				rules: {
					accountType: {
						rules: [{
							required: true,
							errorMessage: '请选择账户类型',
						}]
					},
					accountKey: {
						rules: [{
							required: true,
							errorMessage: '请填写账户唯一标识',
						}]
					},
					accountName: {
						rules: [{
							required: true,
							errorMessage: '请输入账户名称',
						}]
					},
					paymentLink: {
						rules: [{
							required: true,
							errorMessage: '请上传支付收款码',
						}]
					}
				},
				accTypeList: [{
					name: '支付宝',
					value: 'alipay'
				}, {
					name: '微信',
					value: 'wechat'
				}, {
					name: '银行卡',
					value: 'bank'
				}],
				index: 0,
				loading: false,
				isDefault: false,
				accTypeName: '请选择账号类型', // 默认选项
				paymentWayList: [{
					"value": "qr",
					"text": "扫码"
				}, {
					"value": "trans",
					"text": "转账"
				}],
				show: false
			};
		},
		onLoad(options) {
			this.id = options.id || ''
			this.fetchDetail()
		},
		methods: {
			fetchDetail(){
				if(this.id){
					info(this.id).then(res=>{
						this.form = res.data || {}
						this.accTypeName = this.accTypeList.find(item=>item.value === this.form.accountType).name || '请选择账号类型' // 默认选项
						this.index = this.accTypeList.findIndex(item=>item.value === this.form.accountType) // 默认选项的索引值
                        this.imageFileList = [{url:this.form.paymentImage,paymentLink:this.form.paymentLink,status:'success',message:''}] // 图片列表
                        this.isDefault = this.form.status == '0' // 是否默认账户
                        uni.setNavigationBarTitle({title: '编辑收银账户'}) // 修改页面标题
					})   
				}  
			},
			
			deletePic(event) {
				this.imageFileList.splice(event.index, 1);
			},
			
			// 新增图片
			async afterRead(event) {
				this.imageFileList = [{
					...event.file,
					status: 'uploading',
					message: '上传中',
				}]
			
				const {
					data
				} = await uploadFile({
					name: 'qrcodeFile',
					filePath: event.file.url
				});
			
				this.imageFileList = [{
					...data,
					url:data.paymentImage,
					status: 'success',
					message: ''
				}]
			
				this.form.paymentLink = data?.paymentLink || ''
				this.form.paymentImage = data?.paymentImage || ''
			},
			
			setDefault(e) {
				// 点击开关的时候看value值得变化
				this.isDefault = e;
				if (e) {
					this.form.status = "0";
				} else {
					this.form.status = "1";
				}

			},
			pickerChange(e, accTypeList) {
				let index = e.detail.value;
				this.index = index
				this.accTypeName = accTypeList[index].name // 这里给展示的text赋值
				this.form.accountType = accTypeList[index].value;
			},
			showAccTypePicker() {
				this.show = true;
			},
			// 触发提交表单
			submitForm() {
				const self = this
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					self.$refs.code.open()
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			
			onConfirm() {
				const self = this
				
				if (!this.code) {
					return false
				}
				
				this.loading = true;
				const Methods = this.form.id ? edit : add // 判断是新增还是编辑操作，调用不同的接口方法名
				Methods(this.form, this.code).then(response => {
					this.loading = false;
					if (response.code == 200) {
						uni.showModal({
						  title: '系统提示',
						  content: this.form.id ? '收银账户编辑成功':'收银账户添加成功！',
						  showCancel:false,
						  confirmText: '知道了',
						  success: function (res) {
						    if (res.confirm) {
								self.$tab.navigateBack()
						    }
						  }
						})
					}
				}).catch(() => {
					this.loading = false;
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #f2f2f2;
		
		&::v-deep{
			.uni-forms-item__label{
				font-size:30rpx !important;
				color:#666;
				justify-content: flex-end !important;
				margin-right: 30rpx;
			}
			
			.uni-forms-item{
				border-bottom: 1px solid #efefef;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				margin-bottom: 0 !important;
				
				&:last-child{
					border-bottom: none !important;
				}
			}
			
			.is-required{
				margin-right: 10rpx;
				margin-top: 10rpx;
			}
			
			.uni-forms-item__content{
				display: flex;
				flex-direction: column;
				justify-content:center !important;
				
				.picker{
					color:#333;
					font-size: 30rpx;
				}
			}
			
			.uni-easyinput__content-input{
				padding-left: 0 !important;
			}
			
			.uni-input-placeholder,.uni-input-input{
				font-size:30rpx;
			}
			
			.uni-input-placeholder{
				color:#666;
			}
			
			.uni-input-input{
				color:#333;
			}
			
			.u-upload{
				margin-top:14rpx;
				padding-bottom: 14rpx;
			}
			
			.u-upload__button{
				margin:0 !important;
				
			}
			
			.uni-data-checklist{
				align-items: center;
				display: flex;
			}
		}

		.top {
			background-color: #ffffff;
			padding-left:30rpx;
			
			&::v-deep{
				.uni-forms-item{
					margin-bottom: 0;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding-left:30rpx;
			background-color: #ffffff;
			font-size: 30rpx;

			.tag {
				display: flex;

				.left {
					width: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx #efefef;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				// border-bottom: solid 1rpx $u-border-color;
				line-height: 64rpx;
				padding-bottom: 30rpx;
				color:#666;

				.tips {
					font-size: 26rpx;
					color:#999;
				}
				
				.set{
					font-size: 30rpx;
					color:#333;
				}

				.right {
					margin-right: 20rpx;
				}
			}
		}

		.submitBtn {
			position: fixed;
			display: flex;
			justify-content: center;
			width: 100%;
			padding: 50rpx;
			bottom: 20rpx;
		}
	}
</style>